import { View, Text, Button } from '@tarojs/components'
import { useScreenWidthSimple } from '../../hooks/useScreenWidth'
import { defaultTabBarConfig } from '../../config/tabBarConfig'
import CustomTabBar from '../../components/CustomTabBar'
import './tabBarDemo.scss'

export default function TabBarDemo() {
  const screenWidth = useScreenWidthSimple()
  const { minWidthForDisplay } = defaultTabBarConfig

  return (
    <View className="tabbar-demo">
      <View className="info-section">
        <Text className="title">TabBar显示控制演示</Text>
        
        <View className="info-item">
          <Text className="label">当前屏幕宽度：</Text>
          <Text className="value">{screenWidth}px</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">TabBar显示阈值：</Text>
          <Text className="value">{minWidthForDisplay}px</Text>
        </View>
        
        <View className="info-item">
          <Text className="label">TabBar状态：</Text>
          <Text className={`value ${screenWidth >= minWidthForDisplay ? 'show' : 'hide'}`}>
            {screenWidth >= minWidthForDisplay ? '显示' : '隐藏'}
          </Text>
        </View>
      </View>

      <View className="description">
        <Text className="desc-text">
          当屏幕宽度小于{minWidthForDisplay}px时，TabBar会自动隐藏。
          您可以通过调整浏览器窗口大小来测试这个功能。
        </Text>
      </View>

      <View className="controls">
        <Text className="control-title">配置选项：</Text>
        <Text className="control-desc">
          您可以在 `src/config/tabBarConfig.ts` 文件中修改 `minWidthForDisplay` 值来调整显示阈值。
        </Text>
      </View>

      {/* 这里会显示CustomTabBar组件 */}
      <CustomTabBar />
    </View>
  )
}
